<script setup>
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '@/stores/counter.js'
  const store = useCounterStore()
  // 注意：这里面只能解构出响应式数据，函数会自动过滤掉，解构不出来
  const { count } = storeToRefs(store)
  const { increment, decrement } = store
</script>
<template>
  <view class="counter">
    <button class="button" type="primary" @click="decrement">-</button>
    <input class="input" type="text" v-model="count" />
    <button class="button" type="primary" @click="increment">+</button>
  </view>
</template>

<style lang="scss" scoped>
  .counter {
    display: flex;
    padding: 100rpx;
  }

  .input {
    flex: 1;
    height: 96rpx;
    text-align: center;
    border: 2rpx solid #eee;
    box-sizing: border-box;
  }

  .button {
    width: 100rpx;
    margin: 0;

    &:first-child {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    &:last-child {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }
</style>
